<!--弹窗功能-->
<template>
  <div class="mc-el-dialog">
    <!--用户反馈太多弹窗不好识别-->
    <span class="mc-el-dialog-assist" v-if="title">{{title}}</span>
  <el-dialog ref="elDialog" class="mc-on-shade10" :visible.sync="visibleVal" :title="title" v-bind="$attrs" v-on="$listeners" @close="close" :modal="modalValue">
    <slot></slot>
    <span slot="footer" class="dialog-footer">
        <slot name="footer"></slot>
    </span>
  </el-dialog>
  </div>
</template>

<script>
export default {
    name: 'mc-dialog',
    data () {
        return {
          modalValue:window.iframeUi?false:this.modal
        }
    },
    computed:{
      visibleVal: {
        get() {
          if(this.visible){
            if(window.iframeUi){
              this.setWinDialog(true);
            }
          }
          return this.visible
        },
        set(val) {
          this.$emit('update:visible', val)
        }
      }
    },
    props: ['visible','title','modal','height','mcName'],
    updated(){
      this.fixElementMcDom();
      if(this.height){
        var ref = this.$refs.elDialog;
        var children = ref.$el.children || ref.$el.childNodes;
        var elDialog = children[0];
        elDialog.style.height=this.height;

        var elDialogChildren = elDialog.children||elDialog.childNodes;
        var header = elDialogChildren[0];
        if(elDialogChildren.length>1){
          var body = elDialogChildren[1];
          var footerHeight = 0;
          if(elDialogChildren.length>2){
            var footer = elDialogChildren[2];
            var dialogFooter = footer.children[0];
            if(dialogFooter.children.length>0){
              footerHeight = footer.offsetHeight;
            }else {
              if(dialogFooter.offsetHeight>0){
                footerHeight = dialogFooter.offsetHeight;
              }
              if(footerHeight<=30){
                footerHeight = 0;//没操作按钮 干脆也别留白底了
              }
            }
            if(footerHeight>30){
              footerHeight=40;
            }
          }
          body.style.height = "calc( 100% - "+(header.offsetHeight+footerHeight+10)+"px )";
        }
      }
    },
    mounted () {
        if(window.iframeUi){
            this.$emit("update:visible",this.getWinDialog());//只要在布局里就给它加载 就弹出来
        }
        this.fixElementMcDom();
    },
    methods:{
        setWinDialog(val){
            if(!window.__mcDialog){
              window.__mcDialog={};
            }
            var mcId = this.findMcId();
            if(mcId){
                window.__mcDialog[mcId] = val;
            }
        },
        getWinDialog(){
            if(!window.__mcDialog){
              window.__mcDialog={};
            }
            var mcId = this.findMcId();
            if(mcId){
              return window.__mcDialog[mcId];
            }
            return false;
        },
        close(){
          if(window.iframeUi){
            this.setWinDialog(false);
          }
        },
        findMcId(){
          if(window.iframeUi&&window.iframeUi.jsonFactory){
              var magicalCoderIdAttrName = window.iframeUi.jsonFactory.api().getMagicalCoderIdAttrName();
              var $dialogEl = $(this.$el);
              var mcid = $dialogEl.attr(magicalCoderIdAttrName);
              if(mcid){
                return this.mcName+mcid;
              }
              var body = $dialogEl.find(".el-dialog__body");
              if(body.length>0){
                mcid = body.attr(magicalCoderIdAttrName);
                if(mcid){
                  return this.mcName+mcid;
                }
              }
              //那就是被嵌入到其他组建内部了 取当前组件
              var p = $dialogEl.parent();
              var maxWhile =0;
              while(p && p.length>0 && !p.attr(magicalCoderIdAttrName)&&maxWhile++<1000){
                p = p.parent();
              }
              if(p && p.length>0){
                  return this.mcName+p.attr(magicalCoderIdAttrName);
              }
          }
          return null;

        },
        fixElementMcDom:function () {
          if(window.iframeUi&&window.iframeUi.jsonFactory){
            this.$nextTick(()=>{//虚拟dom转化为真实dom后触发 这样动态新增的结构里 仍然可以被拖拽
              // console.log("刷新")
              var style = $(this.$refs.elDialog.$el).css("z-index")
              if(style){
                style = parseInt(style)
                if(style<=10000){
                  style+=10000;
                }
              }else {
                style = 10001
              }
              $(this.$refs.elDialog.$el).css("z-index",style)
              //修复下弹窗面板 把我的id吃掉了
              var dragMcPane = window.iframeUi.jsonFactory.api().pubGetDragMcPaneName();
              var magicalCoderIdAttrName = window.iframeUi.jsonFactory.api().getMagicalCoderIdAttrName();
              //var container = $("#magicalDragSceneGhost").length>0?$("#magicalDragSceneGhost") : $("#magicalDragScene");
              var needRefresh = false;
              var $dom = $(this.$el);
              $dom.removeClass(dragMcPane);
              var body = $dom.find(".el-dialog__body");
              if(body.length>0){//elementui 你为啥开始不创建这个结构烦死
                var elDialogWrapper = body.parents('.mc-el-dialog');
                var mcId = elDialogWrapper.attr(magicalCoderIdAttrName);
  //                  elDialogWrapper.removeAttr(magicalCoderIdAttrName);//这个别去掉 不然点击弹窗：before 没法聚焦弹窗
                elDialogWrapper.removeClass(dragMcPane);
                body.attr(magicalCoderIdAttrName,mcId);
                body.addClass(dragMcPane);
                needRefresh=true;
              }
              /*       container.find(".el-dialog").each(function(idx,item){
                         var body = $(this).find(".el-dialog__body");
                         if(body.length>0){//elementui 你为啥开始不创建这个结构烦死
                             var elDialogWrapper = $(this).parent();
                             var mcId = elDialogWrapper.attr(magicalCoderIdAttrName);
                             elDialogWrapper.removeAttr(magicalCoderIdAttrName);
                             elDialogWrapper.removeClass(dragMcPane);
                             body.attr(magicalCoderIdAttrName,mcId);
                             body.addClass(dragMcPane);
                             needRefresh=true;
                         }
                     })*/

              $(".v-modal").click(function(){
                $(".v-modal").remove();
              })
              if(needRefresh){
                window.iframeUi.magicalApi.addApiTask({methodName:"refreshDragEvent"});
              }
            })
          }
        }
    }

}
</script>

<style lang="scss">
  .mc-el-dialog-assist{
    display: none;
  }
  .magicalcoder-dragging .mc-el-dialog>.mc-el-dialog-assist{
    display: inline-block;
  }
  .magicalcoder-dragging .mc-el-dialog[data-magical__coder__id]:before{
    content: '弹窗';
  }
  .magicalcoder-dragging .mc-el-dialog{
      .el-dialog__headerbtn{
        top:10px;
      }
  }
  .mc-el-dialog {

      .el-dialog__body {
          box-sizing: border-box;
          height : calc(100% - 100px );
          overflow-y: auto;
          .mc-ui-absolute-pane{
              position: relative;
              height : 100%;
          }
      }
      .el-dialog__footer{
          height:unset !important;
      }

  }
</style>
